<template>
  <div class="action-wrap">
    <el-button class="first-span"
               type="text"
               @click="handleClick">{{title}}</el-button>
    <el-dialog :visible="visible"
               :before-close="handleCancel"
               title="跟进说明"
               :close-on-click-modal="false"
               width="700px"
               top="20vh"
               append-to-body>
      <el-row>
        <el-col :span="24">
          <div class="remark-box">
            <el-form label-width="0">
              <el-form-item>
                <el-input v-model="remarks"
                          type="textarea"
                          show-word-limit
                          :placeholder="placeholder"
                          :maxlength="maxlength"
                          @input="handleInput" />
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="24">
          <div class="footer">
            <el-button type="primary"
                       :loading="loading"
                       @click="handleSubmit">提交</el-button>
          </div>
        </el-col>
      </el-row>
      <div v-if="history.length">
        <label style="font-weight:600; line-height: 20px;">历史跟进信息</label>
        <div style="border-bottom: 2px solid #DCDFE6; margin: 10px 0"></div>
        <div class="history_sty">
          <template v-for="(item,index) in history">
            <div :key="index"
                 class="options_sty">
              <div class="centext_sty">
                <span style="width: 20%;">{{item.createAt}}</span>
                <div class="remark_sty">
                  <span>{{item.creatorName}}</span>
                  <span style="color: #000"> {{item.remarks}}</span>
                </div>
              </div>
              <icon-svg v-if="item.deleted"
                        icon-name="shanchu1"
                        class-name="iconSty-1 w5p pointer"
                        @click="handleDelete(item.followId)" />
            </div>
          </template>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import _ from 'lodash'
export default {
  name: "OrderFollowAction",
  inject: ["$table"],
  props: {
    record: {
      type: Object,
      default: () => { }
    },
    addUrl: {
      type: String,
      default: null
    },
    searchUrl: {
      type: String,
      default: null
    },
    deleteUrl: {
      type: String,
      default: null
    },
    // 按钮名称
    title: String,
    placeholder: {
      type: String,
      default () {
        return "请输入跟进信息"
      }
    }
  },
  data () {
    return {
      loading: false,
      visible: false,
      remarks: null,
      maxlength: 200,
      history: []
    }
  },
  computed: {
    params () {
      return {
        orderId: this.record.orderId,
        waybillId: this.record.waybillId,
        page: 1,
        size: 99999,
        sort: [{ name: "createAt", asc: false }],
      }
    }
  },
  methods: {
    handleClick () {
      this.visible = true;
      this.getHistory();
    },
    async getHistory () {
      const { data } = await axios({
        method: "post",
        url: this.searchUrl,
        data: this.params
      });
      this.history = data || [];
    },
    handleDelete: _.debounce(function (followId) {    // 触发事件
      this.$confirm(`确定删除吗？`, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        this.deleteOption(followId);
      });
    }, 600),
    async deleteOption (followId) {
      const { code, message } = await axios({
        method: "delete",
        url: `${this.deleteUrl}${followId}`,
        data: {
          followId: followId
        },
      });
      if (0 === code) {
        this.$message({ type: "success", message });
        this.getHistory();
      } else {
        this.$message({ type: "error", message });
      }
    },
    handleInput (val) {
      // if (val && val.match(/\s/g, '')) {
      //   val = val.replace(/\s/g, '');
      // }
      this.remarks = val.trim();
    },
    handleSubmit: _.debounce(function () {    // 触发事件
      this.loading = true;
      this.submit();
    }, 800),
    async submit () {
      if (!this.remarks) {
        this.loading = false;
        return this.$message({ type: 'error', message: this.placeholder })
      }
      const { code, message } = await axios({
        method: "post",
        url: this.addUrl,
        data: {
          orderId: this.record.orderId,
          waybillId: this.record.waybillId,
          remarks: this.remarks,
        },
      })
        .catch(() => {
          this.loading = false;
        });
      this.remarks = null;
      if (0 === code) {
        this.loading = false;
        this.$message({ type: "success", message });
        this.getHistory();
      } else {
        this.$message({ type: "error", message });
      }
    },
    handleCancel () {
      this.remarks = null;
      this.visible = false;
    }
  }
}
</script>
<style>
.remark-box {
  max-height: 400px;
}
.iconSty-1 {
  width: 20px;
  height: 20px;
}
.options_sty {
  margin: 10px 0;
  display: flex;
  justify-content: space-between;
  line-height: 20px;
  padding-right: 10px;
  font-size: 12px;
}
.centext_sty {
  display: flex;
  width: 95%;
}
.remark_sty {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
  width: 78%;
}
.history_sty {
  max-height: 200px;
  overflow-y: auto;
}
.w5p {
  width: 5%;
}
.first-span {
  /* border-left: 1px solid var(--prev-border-color-grey);
  border-right: 1px solid var(--prev-border-color-grey); */
  padding: 0;
  border-radius: 0px;
}
</style>